<script setup>
	import { onLoad, onHide, onShareAppMessage } from '@dcloudio/uni-app'
	import { ref, nextTick } from 'vue'
	import { getVideo, getVideoNext, likesVideo } from '@/api/login'
	
	const statusHeight = ref(0)
	const menuHeight = ref(32)
	const loading = ref(false)
	const query = ref({current: 0, size: 20})
	const total = ref(0)
	const videoList = ref([])
	const curIndex = ref(0)
	let clickCount = 0
	let firstClickTime = 0
	
	function changeCurrent(e) {
		let nowIndex = e.detail.current
		let preIndex = curIndex.value
		let videoCtx = uni.createVideoContext(`video_${preIndex}`)
		videoCtx.pause()
		videoList.value[preIndex].play = false
		setTimeout(() => {
			let videoCtx = uni.createVideoContext(`video_${nowIndex}`)
			videoCtx.play()
			videoList.value[nowIndex].play = true
		}, 200)
		curIndex.value = nowIndex
		if(nowIndex + 2 >= videoList.value.length) {
			nextData()
		}
	}
	function nextData() {
		loading.value = true
		getVideoNext(5).then(res => {
			let result = res.result || []
			result.forEach(item => {
				item.play = false
				item.likeNum = Number(item.likeNum || 0)
			})
			videoList.value.push(...result)
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function getData(id) {
		curIndex.value = 0
		getVideo(id).then(res => {
			let result = res.result || {}
			result.play = false
			result.likeNum = Number(result.likeNum || 0)
			videoList.value.push(result)
			nextTick(() => {
				let videoCtx = uni.createVideoContext(`video_${curIndex.value}`)
				videoCtx.play()
				videoList.value[curIndex.value].play = true
			})
			nextData()
		})
	}
	function videoClick(index) {
		clickCount++
		if(clickCount === 1) {  
			firstClickTime = Date.now();  
			setTimeout(() => {  
				if(clickCount === 1) {  
					playOrPause(index)
				}
				clickCount = 0
			}, 300)
		}else if(clickCount === 2) {  
			if(Date.now() - firstClickTime <= 300) {
				likeClick(index)
			}
			clickCount = 0
		}
	}
	function playOrPause(index) {
		if(videoList.value[index].play) {
			let videoCtx = uni.createVideoContext(`video_${index}`)
			videoCtx.pause()
			videoList.value[index].play = false
		} else {
			let videoCtx = uni.createVideoContext(`video_${index}`)
			videoCtx.play()
			videoList.value[index].play = true
		}
	}
	function likeClick(index) {
		let item = videoList.value[index]
		likesVideo(item.videoId).then(res => {
			if(item.like) {
				item.like = false
				item.likeNum -= 1
			} else {
				item.like = true
				item.likeNum += 1
			}
		})
	}
	function backPage() {
		uni.navigateBack({
			fail: () => {
				uni.switchTab({url: '/pages/tabbar/index'})
			}
		})
	}
	
	onLoad((option) => {
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		statusHeight.value = menuButtonInfo.top
		menuHeight.value = menuButtonInfo.height
		// #endif
		if(option.id) {
			getData(option.id)
		}
	})
	onShareAppMessage(() => {
		let curItem = videoList.value[curIndex.value]
		return {
			title: curItem.title,
			path: '/pages/videoPlay?id=' + curItem.videoId,
			imageUrl: curItem.cover && curItem.cover.furl
		}
	})
	onHide(() => {
		let videoCtx = uni.createVideoContext(`video_${curIndex.value}`)
		videoCtx.stop()
	})
</script>

<template>
	<view class="app-container">
		<swiper class="swiper-box" :current="curIndex" @change="changeCurrent" vertical>
			<swiper-item v-for="(item, index) in videoList" :key="item.videoId">
				<view v-if="Math.abs(curIndex - index) <= 2" class="item-box">
					<video :id="`video_${index}`" class="video" :src="item.annex && item.annex.furl" :controls="false" 	play-btn-position="center" 
						show-center-play-btn loop @click="videoClick(index)"></video>
					<view class="video-play" v-if="!item.play" @click="videoClick(index)">
						<uv-icon name="play-right-fill" color="#FFFFFF" size="60" />
					</view>
					<view class="video-right">
						<view class="right-box" @click="likeClick(index)">
							<uv-icon name="heart" color="#FFFFFF" size="60" v-if="!item.like" />
							<uv-transition :show="true" mode="zoom-in" v-else>
								<uv-icon name="heart-fill" color="#FF3E49" size="60" />
							</uv-transition>
							<text>{{item.likeNum || 0}}</text>
						</view>
						<button class="uv-reset-button right-box right-top" open-type="share">
							<uv-icon name="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-13/1739441950832_forward.png"
								color="#FFFFFF" size="60" />
						</button>
					</view>
					<view class="video-bottom">
						<view class="bottom-info">
							<uv-image :src="item.avatar && item.avatar.furl" width="60rpx" height="60rpx" shape="circle"></uv-image>
							<view class="bottom-info-text uv-line-1">{{item.createBy || ''}}</view>
						</view>
						<view class="bottom-title uv-line-2">{{item.title || ''}}</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<empty text="没有找到视频"></empty>
			</swiper-item>
		</swiper>
		<view class="app-head" :style="{height: menuHeight + 'px', top: statusHeight + 'px'}" @click="backPage">
			<uv-icon name="arrow-left" color="#FFFFFF" size="46" />
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		height: 100vh;
		background-color: #000000;
		.swiper-box{
			height: 100%;
			.item-box{
				height: 100%;
				position: relative;
				.video{
					width: 100%;
					height: 100%;
				}
				.video-play{
					position: absolute;
					top: calc(50% - 40rpx);
					left: calc(50% - 40rpx);
					z-index: 10;
					width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.video-right{
					position: absolute;
					bottom: 220rpx;
					right: 0;
					padding: 0 24rpx;
					z-index: 10;
					color: #FFFFFF;
					.right-box{
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 8rpx;
					}
					.right-top{
						margin-top: 40rpx;
					}
				}
				.video-bottom{
					position: absolute;
					bottom: 20rpx;
					left: 0;
					right: 0;
					z-index: 10;
					padding: 24rpx;
					color: #FFFFFF;
					.bottom-info{
						display: flex;
						align-items: center;
						gap: 16rpx;
						.bottom-info-text{
							width: calc(100% - 36rpx);
						}
					}
					.bottom-title{
						margin-top: 16rpx;
					}
				}
			}
		}
		.app-head{
			position: fixed;
			left: 0;
			z-index: 10;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
		}
	}
</style>